<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 网络来源图片 要是通过img标签显示 需要添加mate标签 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
  <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }

    /* 可以根据自己的需求设定需要的css样式 */
    .m-style{
      width: 700px;
      margin: 20px auto;
    }

    .m-style .prev{
      background: blue;
    }
    .m-style .next{
      background: blue;
    }

    .m-style .active{
      background: pink;
    }
  </style>
</head>
<body>
  <h1>我是一个列表页面</h1>

  <div class="pagi"></div>

  <!-- 为了看的清楚 分页 写在上面了 -->
  <div class="box m-style"></div>

  <div class="container">
    <ul></ul>
  </div>



  <script src="../tools/jquery.min.js"></script>
  <script src="../js/myAjax.js"></script>
  <script src="../js/tools.js"></script>
  <script src="../tools/jquery-pagination/jquery.pagination.js"></script>
  <script>
    let page = 1;
    let line = 8;
    const urlObj = myGetUrlValObj();
    console.log(urlObj);
    setPage();
    function setPage(){
        const xhr = myPromiseJQueryAjax('../server/goods_list.php','get',{
        cat_one_id:urlObj.cat_one_id,
        page,
        line
        },'json');
        xhr.then(function(res){
          console.log(res);
            let str = '';
            res.data.forEach(function(item){
              str += `
              <li class="list-item">
                <div class="panel panel-primary">
                  <div class="panel-body">
                    <ol class="breadcrumb">
                      <li><a href="#">${item.cat_one_id}</a></li>
                      <li><a href="#">${item.cat_two_id}</a></li>
                      <li class="active">${item.cat_three_id}</li>
                    </ol>
                  </div>
                  <div class="panel-footer">
                    <div class="row">
                      <div class="">
                        <div class="thumbnail">
                          <img src="${item.goods_big_logo}" alt="...">
                          <div class="caption">
                            <h3>${item.goods_name}</h3>
                            <p>
                              <i class="glyphicon glyphicon-yen"></i>
                              <span>${item.goods_price}</span>
                            </p>
                            <p>
                              <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                              <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              `;
            })

            $('.container ul').html(str);

            $('.box').pagination({
              pageCount:res.sunPage,
              totalData:res.row,
              current:res.page,
              showData:res.line,
              prevCls:'prev',
              nextCls:'next',
              prevContent:'上一页',
              nextContent:'下一页',
              activeCls:'active',
              mode:'fixed',
              count:4,
              coping:true,
              homePage:'首页',
              endPage:'末页',
              isHide:true,
              keepShowPN:true,
              jump:true,
              callback:function(result){
                page = result.getCurrent;
                setPage();
              }
            })
        })
    }
    
    
  </script>

  <script>
   

     

  </script>

  <script>
    /*
      1 根据 前端传参 cat_one_id 数值 获取 后端数据库数据 
        动态渲染生产页面内容
          传参方式 get 方式
          携带参数是 cat_one_id 一级分类名称
                    page  分页显示 当前是 第几页 默认 显示 第一页内容
                    line  一页显示 几条数据 也就是每页显示的数据数量
                          需要根据实际项目需求设定 我们目前设定 8

        响应体数据
          data: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            存储 结果的数组
          line: "8"
            每页数据数量
          page: "1"
            当前第几页
          row: "100"
            数据总数量
          sumPage: 13
            总页数

        分页显示需要的数据 存储在异步请求 获取的结果中 
          因为是 异步请求 理论上 会 最后执行
          设定 分页显示时 异步程序 还没有执行
          也就没有 数据结果 
          解决方案:
            1,  使用 async 和 await 来完成 请求 执行效果 类似于 通过程序
            2,  将 分页插件 设定到 异步请求的回调函数中

      2 分页显示 使用 插件完成
        (1) 导入 插件的 相关文件
            pagination.css  css样式设定文件
            jquery.pagination.js  功能文件
                                  必须要先 导入 jQuery文件 再导入 这个文件

        (2) 使用步骤
            创建一个div,设定class等属性 
            根据设定的属性 使用选择器获取标签对象,设定 分页器插件
            $('条件').pagination(参数)
              参数是一个对象 通过对象的属性设定分页器 相关的 参数数据
              pageCount       	总页数
              totalData         数据总数量
              current           当前第几页
              showData          每页数据数量
              prevCls           上一页class类名
              nextCls           下一页class类名

    
    */
  </script>
</body>
</html>


<!--  





-->